<template>
  <div id='centerdiv'>
    <img id='bgimage' src='../../assets/404.svg' alt='404 Not Found'/>
    <div id='titletext'>404</div>
    <div id='bottomtext-left'>&copy; {{ copyrightYear }}</div>
    <div id='bottomtext-right'>{{ copyrightProprietor }}</div>
  </div>
</template>
<style lang="sass" scoped>
#centerdiv
  position: absolute
  top: 30%
  left: 50%
  width: 480px
  height: 170px
  margin-left: -240px
  margin-top: -85px

#bgimage
  width: 100%
  height: 100%

#titletext
  position: absolute
  top: 10px
  left: 20px
  color: #00a0e9
  font-family: Arial, Helvetica, sans-serif
  font-size: 40px

#bottomtext-left
  position: absolute
  top: 143px
  left: 0
  font-size: 12px
  color: black
  font-family: Arial, Helvetica, sans-serif

#bottomtext-right
  position: absolute
  top: 143px
  right: 0
  font-size: 12px
  color: black
  font-family: Arial, Helvetica, sans-serif

</style>
<script lang="ts">
export default {
  name: 'error404Std'
}
</script>

<script lang="ts" setup>
const copyrightYear = $f.packageInfo?.copyrightYear
const copyrightProprietor = $f.packageInfo?.njtconfig.copyrightProprietor
</script>
